<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="d3.js"></script>
    <script>
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',500);
        svg.style('border','2px solid #ccc');
        
        // // 数据初始化
        // var data = [];
        // var n = 10; // 最终的数据点数量
        // var maxValue = 100; // 数据的最大值

        // // 生成初始数据
        // for (var i = 0; i <= n; i++) {
        // data.push({
        //     x: i,
        //     y: 0 // 初始的 y 值都为 0
        // });
        // }


        // // 定义 x 和 y 比例尺
        // var xScale = d3.scaleLinear().range([0, 400]).domain([0, n]);
        // var yScale = d3.scaleLinear().range([300, 0]).domain([0, maxValue]);

        // // 创建初始折线图
        // var line = d3.line()
        // .x(function(d) { return xScale(d.x); })
        // .y(function(d) { return yScale(d.y); });

        // svg.append("path")
        // .datum(data)
        // .attr("d", line)
        // .attr("fill", "none")
        // .attr("stroke", "blue")
        // .attr("stroke-width", 2);

        // // 动画过渡函数
        // function animateChart() {
        // // 生成新的数据
        // var newData = [];
        // for (var i = 0; i <= n; i++) {
        //     newData.push({
        //     x: i,
        //     y: Math.random() * maxValue // 随机生成新的 y 值
        //     });
        // }

        // // 更新折线图路径
        // svg.select("path")
        //     .datum(newData)
        //     .transition()
        //     .duration(1000) // 动画过渡时间
        //     .attr("d", line);

        //     // 循环动画
        //     //setTimeout(animateChart, 1500);
        // }

        // // 启动动画
        // animateChart();
    
        //黑龙江省历年理科一本线
        const data = [
            {date:'2014',score:500},
            {date:'2015',score:550},
            {date:'2016',score:510},
            {date:'2017',score:520},
            {date:'2018',score:450},
            {date:'2019',score:430},
            {date:'2020',score:470},
            {date:'2021',score:360},
            {date:'2022',score:410},
            {date:'2023',score:380}
        ];

        const xScale = d3.scaleTime()
            .domain(d3.extent(data,d=>new Date(d.date)))
            .range([0,600])

        const yScale = d3.scaleLinear()
            .domain(d3.extent(data,d=>d.score))
            .range([400,0])
            .nice();

        const xAxis = d3.axisBottom(xScale).ticks(10);
        
        svg.append('g').attr('transform','translate(50,450)').call(xAxis);


        const yAxis = d3.axisLeft(yScale);

        svg.append('g').attr('transform','translate(50,50)').call(yAxis);

        const line = d3.line(d=>xScale(new Date(d.date)) , d=>yScale(d.score) ).curve(d3.curveBumpX);

        const path = svg.append('path')
            // .datum(data)
            .attr('transform','translate(50,50)')
            .attr('stroke','#666')
            .attr('fill','none')
            // .transition()
            // .duration(3000)
            // .attr('d',line)

        let i = 1 ;
        function move(){
          if(i<=data.length){
            svg.append('circle')
              .attr('transform','translate(50,50)')
              .datum(data.slice(0,i).reverse()[0])
              .attr('cx',d=>xScale(new Date(d.date)))
              .attr('cy',d=>yScale(d.score))
              .attr('r',5)
              .attr('fill','steelblue');


              path.datum(data.slice(0,i))
                  .attr('d',line)
              i++;
              setTimeout(move,60)
            }
        }
        move()

        


       
    </script>
</body>
</html>